<!-- <style>
html,body{
    background:black;
}

</style>
<button>点击加星星</button>

<script>
// 1获取button按钮
// 2. 给button增加点击事件
// 3.造标签
// 4修改标签的属性(src或随机高)
// 6.更改位置
// 5.把img投在body里面
var btnObj=document.querySelector('button')
btnObj.onclick=function(){
    var imgObj=document.createElement('img')
    imgObj.src='star.gif'
    var min=20
    var max=100
    var data=Math.floor(Math.random()*(max-min+1)+min)
    imgObj.style.width=data+'px'
    var maxLeft = (window.innerWidth || document.documentElement.clientWidth) -data
        var maxTop = (window.innerHeight || document.documentElement.clientHeight) -data
        imgObj.style.position = 'absolute' // 相当于body
        imgObj.style.left = Math.floor(Math.random()*(maxLeft-0+1)+0) + 'px'
        imgObj.style.top = Math.floor(Math.random()*(maxTop-0+1)+0) + 'px'
    document.body.appendChild(imgObj)
    
}

</script>  -->

<style>
    html,
    body {
        background: black;
    }

    .hws {
        width: 300px;
        height: 40px;
        border: 5px purple solid;
        position: relative;
        left: 0;
        top: 0;

    }

    .hhb {
        position: absolute;
        left: 0;
        top: 0;
        height: 40px;
        background: red;

    }
    .txt{
        color: #ffffff;
    }
</style>

<body>
    <div class='hws'>
        <div class="hhb" style="width:100%"></div>
    </div>
    <div class="txt"></div>
</body>
<script>

    setInterval('fn()', 1000)
    function fn() {
        var imgObj = document.createElement('img')
        imgObj.src = 'star.gif'
        var min = 20
        var max = 100
        var data = Math.floor(Math.random() * (max - min + 1) + min)
        imgObj.style.width = data + 'px'
        var maxLeft = (window.innerWidth || document.documentElement.clientWidth) - data
        var maxTop = (window.innerHeight || document.documentElement.clientHeight) - data
        imgObj.style.position = 'absolute' // 相当于body
        imgObj.style.left = Math.floor(Math.random() * (maxLeft - 0 + 1) + 0) + 'px'
        imgObj.style.top = Math.floor(Math.random() * (maxTop - 0 + 1) + 0) + 'px'
        document.body.appendChild(imgObj)
    }

    // 删除
    var sss = 0
    var bodyObj = document.querySelector('body')
    bodyObj.onclick = function (evt) {
        var e = evt || window.event
        // var hhl = document.createElement('div')
        var txt = document.querySelector('.txt')
        if (e.target.nodeName == 'IMG') {
            bodyObj.removeChild(e.target)
            sss++
            txt.innerText = '删除的星星有' + sss + '个'
            console.log( '11111',txt.innerText);
            txt.innerHtml = txt
        }
    }

    setInterval(function(){
        var num = parseInt(document.querySelector('.hhb').style.width)
        num--
        document.querySelector('.hhb').style.width=num+'%'



    },1000)
    
</script>
